<template>
	<view class="filter-box">
		<view class="mask cu-modal" :class="{ show: showSel }" style="z-index: 8;" @tap="hideModal"></view>
		<view class="navbar" v-if="showSearch">
			<input class="uni-input form-input search" name="input" v-model='searchText' placeholder="搜索项目编号、名称" @confirm="search"/>
			<view class="pack-up" @tap='packUp()'>
				<image class="" src="../../static/images/icon_arrow_left.png" mode=""></image>
			</view>
			<view class="position-image" @tap="search">
				<image class="po-image" src="../../static/images/icon_found.png" mode="" ></image>
			</view>
			
		</view>
		<view class="navbar" v-else>
			<view class="nav-item y-f" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">
				<view class="img-found">
					<image src="../../static/images/icon_found.png" mode=""></image>
				</view>
				<view class="title-box x-f"><text class="filter-title">搜索</text></view>
			</view>
			<view class="nav-item y-f" :class="{ current: filterIndex === 2 }" @tap="tabClick(2)">
				<text class="filter-title">筛选</text>
				<view class="img-box">
					<image src="../../static/images/icon_arrow_down.png" mode=""></image>
				</view>
			</view>
			<view class="nav-item y-f" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
				<view class="title-box">
					<text class="filter-title">排序</text>
				</view>
				<view class="img-box">
					<image src="../../static/images/icon_arrow_down.png" mode=""></image>
				</view>
			</view>
			<view class="sel-box-two" v-if="showSelTwo">
				<view class="box-two-item" v-if="sortItems.indexOf('industry')!=-1">
					<view class="item-text">行业类别</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['inve_field'])" class="item-picker"
						range-key="CODE_NAME" data-type="INDUSTRY" data-dic="inve_field">
						<view class="uni-input" v-if="!formText.INDUSTRY">请选择</view>
						<view class="value" v-else>{{formText.INDUSTRY}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image>STAR_TYPE -->
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('companySize')!=-1">
					<view class="item-text">企业规模</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['ent_scale'])" class="item-picker"
						range-key="CODE_NAME" data-type="COMPANY_SIZE" data-dic="ent_scale">
						<view class="uni-input" v-if="!formText.COMPANY_SIZE">请选择</view>
						<view class="value" v-else>{{formText.COMPANY_SIZE}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image>STAR_TYPE -->
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('investFiled')!=-1">
					<view class="item-text">投资领域</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['inve_field'])" class="item-picker"
						range-key="CODE_NAME" data-type="INVESTORS_INDUSTRY" data-dic="inve_field">
						<view class="uni-input" v-if="!formText.INVESTORS_INDUSTRY">请选择</view>
						<view class="value" v-else>{{formText.INVESTORS_INDUSTRY}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image>STAR_TYPE -->
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('investType')!=-1">
					<view class="item-text">投资商类型</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['inve_type'])" class="item-picker"
						range-key="CODE_NAME" data-type="TYPE" data-dic="inve_type">
						<view class="uni-input" v-if="!formText.TYPE">请选择</view>
						<view class="value" v-else>{{formText.TYPE}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image>STAR_TYPE -->
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('orgType')!=-1">
					<view class="item-text">机构类型</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['inve_type'])" class="item-picker"
						range-key="CODE_NAME" data-type="TYPE" data-dic="inve_type">
						<view class="uni-input" v-if="!formText.TYPE">请选择</view>
						<view class="value" v-else>{{formText.TYPE}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image>STAR_TYPE -->
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('companyType')!=-1">
					<view class="item-text">企业类型</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['targetType'])" class="item-picker"
						range-key="CODE_NAME" data-type="ENTERPRISE_TYPE" data-dic="targetType">
						<view class="uni-input" v-if="!formText.ENTERPRISE_TYPE">请选择</view>
						<view class="value" v-else>{{formText.ENTERPRISE_TYPE}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image>STAR_TYPE -->
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('important')!=-1">
					<view class="item-text">重要性</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['STAR_TYPE'])" class="item-picker"
						range-key="CODE_NAME" data-type="EVALUATE" data-dic="STAR_TYPE">
						<view class="uni-input" v-if="!formText.EVALUATE">请选择</view>
						<view class="value" v-else>{{formText.EVALUATE}}</view>
					</picker>

					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item"  v-if="sortItems.indexOf('person')!=-1">
					<view class="item-text">跟进人</view>
					<picker @change="bindPickerChange" :range="perData" class="item-picker" range-key="CODE_NAME"
						data-type="MANAGER">
						<view class="uni-input" v-if="!formText.MANAGER">请选择</view>
						<view class="value" v-else>{{formText.MANAGER}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item"  v-if="sortItems.indexOf('proStatus')!=-1">
					<view class="item-text">项目状态</view>
					<picker @change="bindPickerChange" :range="JSON.parse(dicData['busProjStatus'])" class="item-picker"
						range-key="CODE_NAME" data-type="PROJ_STATUS" data-dic="busProjStatus">
						<view class="uni-input" v-if="!formText.PROJ_STATUS">请选择</view>
						<view class="value" v-else>{{formText.PROJ_STATUS}}</view>
					</picker>

				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('createTime')!=-1">
					<view class="item-text">建档日期</view>

					<view class="uni-input" @tap="showRangeDate" data-type="CREATE_TIME" v-if="!formText.CREATE_TIME">
						请选择</view>
					<view class="value" v-else>{{formText.CREATE_TIME}}</view>

					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('year')!=-1">
					<view class="item-text">投产年份</view>
					<picker @change="bindChangeDate" mode="date" class="item-picker" data-type="produceYear"
						start="2019" end="2021" fields="year" data-dic="year">
						<view class="uni-input" v-if="!formText.produceYear">请选择</view>
						<view class="value" v-else>{{formText.produceYear}}</view>
					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('month')!=-1">
					<view class="item-text">期限月份</view>
					<picker @change="bindChangeDate" mode="date" class="item-picker" data-type="siteLastMonth"
						start="2019" end="2021" fields="month" data-dic="month">
						<view class="uni-input" v-if="!formText.siteLastMonth">请选择</view>
						<view class="value" v-else>{{formText.siteLastMonth}}</view>

					</picker>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('startTime')!=-1">
					<view class="item-text">启动时间</view>
					<view class="uni-input" @tap="showRangeDate" v-if="!formText.PROJ_START_UP"
						data-type="PROJ_START_UP">请选择</view>
					<view class="value" v-else>{{formText.PROJ_START_UP}}</view>
					<!-- <image src="../../../static/images/icon_calendar.png" mode=""></image> -->
				</view>
				<view class="box-two-item"  v-if="sortItems.indexOf('standBonus')!=-1">
					<view class="item-text">达产未付</view>
					<picker @change="bindChangeRadio" :range="checkedData" class="item-picker" data-type="standBonus"
						range-key="CODE_NAME">
						<view class="uni-input" v-if="!formText.standBonus">请选择</view>
						<view class="value" v-else>{{formText.standBonus}}</view>
					</picker>
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('baseBonus')!=-1">
					<view class="item-text">基本未付</view>
					<picker @change="bindChangeRadio" :range="checkedData" class="item-picker" data-type="baseBonus"
						range-key="CODE_NAME">
						<view class="uni-input" v-if="!formText.baseBonus">请选择</view>
						<view class="value" v-else>{{formText.baseBonus}}</view>
					</picker>
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('pause')!=-1">
					<view class="item-text">是否暂缓</view>
					<picker @change="bindChangeRadio" :range="checkedData" class="item-picker" data-type="ISREPRIEE"
						range-key="CODE_NAME">
						<view class="uni-input" v-if="!formText.ISREPRIEE">请选择</view>
						<view class="value" v-else>{{formText.ISREPRIEE}}</view>
					</picker>
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('city')!=-1">
					<view class="item-text">省</view>
					<picker @change="bindChangeProvince" :range="province" class="item-picker" data-type="province"
						range-key="CODE_NAME">
						<view class="uni-input" v-if="!provinceText">请选择</view>
						<view class="value" v-else>{{provinceText}}</view>
					</picker>
				</view>
				<view class="box-two-item" v-if="sortItems.indexOf('city')!=-1">
					<view class="item-text">市</view>
					<picker @change="bindChangeCity" :range="city" class="item-picker" data-type="city"
						range-key="CODE_NAME">
						<view class="uni-input" v-if="!cityText">请选择</view>
						<view class="value" v-else>{{cityText}}</view>
					</picker>
				</view>
				<view class="box-two-item">
					<view class="btn-wrap" @tap="clear">
						<image src="../../static/images/btn_chongzhi.png" class="btn-wrap-img"></image>
						<text class="text">重置</text>
					</view>
					<view class="btn-wrap" @tap="confirm">
						<image src="../../static/images/btn_tijiao.png" class="btn-wrap-img"></image>
						<text class="text">确定</text>
					</view>
				</view>
			</view>
			
			<view class="sel-box-the flex flex-direction" v-if="showSelThe">
				<view class="sel-way-item" v-for="item,index in sortList" @click="modeClick(index)" :key='index'>
					<view class="item-text-title">{{item.title}}</view>
					<image v-show="item.sortOrder=='asc'" src="../../static/images/icon_arrow_up.png" mode=""></image>
					<image v-show="item.sortOrder=='desc'" src="../../static/images/icon_arrow_down.png" mode=""></image>
				</view>
			</view>
		</view>
		<mx-date-picker :show="showPicker" type="range" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" @confirm="bindChangeRangeDate" @cancel="onSelected" format="yyyy-mm" class="range-date"
			data-type="PROJ_START_UP" />
		</mx-date-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		props: {
			dicData: {
				type: Object,
				default: {}
			},
			perData: {
				type: Array,
				default: []
			},
			sortList: {
				type: Array,
				default: []
			},
			sortItems:{
				type:String,
				default:'industry,important,person,proStatus,createTime,year,month,startTime,standBonus,baseBonus,pause,companySize'
			}
		},
		data() {
			return {
				showSearch: false,
				filterIndex: 0,
				showSel: false, //综合选择
				showSelOne: false, //显示搜索框
				showSelTwo: false,
				showSelThe: false,
				defaultOrder: 0, //综合
				priceOrder: 0, //价格
				salesOrder: 0, //销量
				newProdcutOrder: 0, //新品优先
				index: 0,
				showPicker: false,
				searchText:'',
				formText: {
					"MANAGER": '',
					"PROJ_STATUS": '',
					produceYear: '',
					siteLastMonth: '',
					baseBonus: '',
					standBonus: '',
					"ISREPRIEE": '',
					"INDUSTRY": '',
					"EVALUATE": '',
					"CREATE_TIME": '',
					"PROJ_START_UP": '',
					"COMPANY_SIZE":'',
					"INVESTORS_INDUSTRY":'',
					'TYPE':'',
					'ENTERPRISE_TYPE':''
				},
				formData: {
					"MANAGER": '',
					"PROJ_STATUS": '',
					produceYear: '',
					siteLastMonth: '',
					baseBonus: '',
					standBonus: '',
					"ISREPRIEE": '',
					"INDUSTRY": '',
					"EVALUATE": '',
					"CREATE_TIME": '',
					"PROJ_START_UP": '',
					"COMPANY_SIZE":'',
					"INVESTORS_INDUSTRY":'',
					"TYPE":'',
					"ENTERPRISE_TYPE":'',
					"DISTCODE":''
				},
				province:[],
				provinceIndex:'',
				provinceText:'',
				city:[],
				cityText:'',
				checkedData: [{
					CODE: 1,
					CODE_NAME: '是'
				}, {
					CODE: false,
					CODE_NAME: '否'
				}],

			};
		},
		computed: {
			filterData() {
				const data = {
					defaultOrder: this.defaultOrder,
					priceOrder: this.priceOrder,
					salesOrder: this.salesOrder,
					newProdcutOrder: this.newProdcutOrder
				};
				return data;
			}
		},
		onLoad() {
			
		},
		created() {
			this.getProvince()
		},
		methods: {
			async bindChangeProvince(e){
				this.provinceIndex = e.detail.value;
				this.provinceText = this.province[e.detail.value].CODE_NAME;
				
				const code = this.province[e.detail.value].CODE;
				this.city = [];
				this.cityText = ''
				const cityData = await this.$req({
					url: `system/dataSourceManage/selectDist.do`,
					data: {
						code: code
					},
				})
				this.city = cityData.data;
				this.formData.DISTCODE = this.province[e.detail.value].CODE;
			},
			bindChangeCity(e){
				this.cityText = this.city[e.detail.value].CODE_NAME;
				console.log('this.city[e.detail.value].CODE', this.city[e.detail.value].CODE)
				this.formData.DISTCODE = this.city[e.detail.value].CODE;
			},
			async getProvince(){
				const dis = await this.$req({
					url: `cache/get.do`,
					data: {
						key: 'distcode',
						cacheObject: 'distcode'
					}
				})
				this.province = dis.data.attributes.value.province;
			},
			modeClick(index){
				this.$emit('onRanking', index)
			},
			//筛选
			tabClick(index) {
				console.log(index, '点击了tab的' + index)
				this.filterIndex = index;
				this.showSel = !this.showSel
				
				if (index === 1) {
					console.log("~~~~~~~~~~~~")
					this.showSel = false;
					this.showSearch = true;
				}
				if (index === 2) {
					this.showSelTwo = !this.showSelTwo;
					this.showSelThe=false
				} 
				if (index === 3) {
					this.showSelTwo=false
					this.showSelThe =!this.showSelThe;
				}
				
			},
			search(e) {
				if(this.searchText){
					this.formData.searchText = this.searchText;
				}else{
					this.formData.searchText=''
				}
				this.$emit('onSearch', this.formData.searchText)
			},
			onSel(dot) {
				this.defaultOrder = dot;
				this.showSel = false;
			},
			hideModal() {
				if (this.filterIndex === 1) {
					this.showSelOne = false
				}
				if (this.filterIndex === 2) {
					this.showSelTwo = false
				}
				if (this.filterIndex === 3) {
					this.showSelThe = false
				}
				this.showSel = false;
			},
			packUp() {
				this.showSearch = false;
				this.clear()
			},
			clear() {
				const formTextValue = {
					...this.formText
				};
				const formDatas = {
					...this.formData
				}
				for (let key in formTextValue) {
					formTextValue[key] = ''
				}
				for (let key in formDatas) {
					formDatas[key] = ''
				}
				this.formText = formTextValue;
				this.formData = formDatas;
				this.provinceText = '';
				this.cityText = ''
			},
			confirm() {
				console.log('this.formdata', this.formData)
				this.$emit('onConfirm', this.formData)
				
				this.showSel = false;
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				const type = e.currentTarget.dataset.type;
				const dic = e.currentTarget.dataset.dic;
				const index = e.target.value;
				const formTextValue = {
					...this.formText
				};
				const formDatas = {
					...this.formData
				}
				console.log(type, dic)
				if(type === 'MANAGER'){
					formTextValue[type] = this.perData[index].CODE_NAME
					formDatas[type] = this.perData[index].CODE
				} else {
					formTextValue[type] = JSON.parse(this.dicData[dic])[index].CODE_NAME;
					formDatas[type] = JSON.parse(this.dicData[dic])[index].CODE
				}
				
				this.formText = formTextValue;
				this.formData = formDatas;
				console.log(this.formText, "this.formTextthis.formText")

			},
			bindChangeRadio(e) {
				const type = e.currentTarget.dataset.type;
				const index = e.target.value;
				const formTextValue = {
					...this.formText
				}
				const formDatas = {
					...this.formData
				}
				formTextValue[type] = this.checkedData[index].CODE_NAME;
				formDatas[type] = this.checkedData[index].CODE;
				this.formText = formTextValue;
				this.formData = formDatas;
			},
			bindChangeDate(e) {
				const type = e.currentTarget.dataset.type;
				const index = e.target.value;
				const formTextValue = {
					...this.formText
				}
				const formDatas = {
					...this.formData
				}
				formTextValue[type] = e.detail.value;
				formDatas[type] = e.detail.value;
				this.formText = formTextValue;
				this.formData = formDatas;
			},
			bindChangeRangeDate(e) {
				console.log('e2', e);
				const formTextValue = {
					...this.formText
				}
				const formDatas = {
					...this.formData
				}
				formTextValue[this.dataType] = e.value.join('~');
				formDatas[this.dataType] = e.value.join(' ~ ');
				this.formText = formTextValue;
				this.formData = formDatas;
				this.showPicker = false;
			},
			dateChange(e) {
				console.log(e)
			},
			showRangeDate(e) {
				this.dataType = e.currentTarget.dataset.type
				this.showPicker = true;
			}
		}
	};
</script>

<style lang="scss">
	.search {
		padding-left: 20rpx;
		padding-right: 40rpx;
		margin-top: 17rpx;
		margin-left: 30rpx;
		width: 630rpx;
		height: 50rpx;
		background-color: #f2f3f4;
		border-radius: 10rpx;
		border: solid 1px #bebebe;
		font-size: 24rpx;
		color: #979797;
	}

	.sel-box {
		position: absolute;
		width: 750rpx;
		height: 140rpx;
		background: rgba(246, 246, 246, 1);
		border-radius: 0px 0px 20rpx 20rpx;
		z-index: 999;
		left: 50%;
		transform: translateX(-50%);
		bottom: -138rpx;
		transition: all ease-out 0.2s;

		.sel-item {
			color: #333;
			padding: 20rpx 40rpx 0;
			font-size: 24rpx;
			font-weight: 500;
		}

		.sel-active {
			color: #d5a65a;
			font-size: 26rpx;
			font-weight: 600;
		}
	}

	.sel-box-the {
		position: absolute;
		top: 80rpx;
		right: 50rpx;
		width: 184rpx;
		// height: 214rpx;
		background-color: #ffffff;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
		transition: all ease-out 0.2s;
		z-index: 999;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;

		.sel-way-item {
			margin: 6rpx 0;
			display: flex;
			align-items: center;
			.item-text-title{
				font-size: 26rpx;
				color: #808080;
			}
			image{
				width: 14rpx;
				height: 9rpx;
				margin-left: 14rpx;
			}
		}
	}

	.filter-box {
		width: 750rpx;
	}

	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		-webkit-transform: scale(1.185);
		transform: scale(1.185);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000px;
		perspective: 1000px;
		background: rgba(0, 0, 0, 0.6);
		-webkit-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.show {
		opacity: 0;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	.navbar {
		display: flex;
		width: 750rpx;
		height: 80rpx;
		background: #fff;
		border-bottom: 1upx solid #e6e6e6;
		border-top: 1upx solid #e6e6e6;
		position: relative;
		z-index: 999;
		transition: all ease-out 0.2s;

		.nav-item {
			height: 80rpx;
			font-family: AlibabaPuHuiTi-Regular;
			font-weight: normal;
			font-size: 26rpx;
			color: #808080;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			position: relative;

			.filter-title {
				color: #808080;
			}

			.img-box {
				width: 14rpx;
				height: 8rpx;
				margin-left: 8rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.img-found {
				width: 26rpx;
				height: 26rpx;
				margin-right: 8rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.line {
				width: 110rpx;
				height: 4rpx;
				background: transparent;
				position: absolute;
				bottom: 0;
				z-index: 2;
			}

			.line-active {
				background: rgba(213, 166, 90, 1);
			}

			.p-box {
				display: flex;
				flex-direction: column;

				.yticon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30rpx;
					line-height: 1;
					height: 14rpx;
					margin-left: 6upx;
					font-size: 22upx;
					font-weight: 600;
					color: #c4c4c4;
					padding: 0rpx 4rpx;
				}

				.xia {
					transform: scaleY(-1);
				}
			}
		}

		.pack-up {
			width: 50rpx;
			height: 50rpx;
			margin-top: 16rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 12rpx;
				height: 22rpx;
			}
		}

		.position-image {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			left: 614rpx;
			top: 12rpx;
			.po-image{
				margin-top: 12rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.current {
		color: #d5a65a;
	}

	.active {
		color: #d5a65a !important;
	}

	.btn-wrap-img {
		width: 100rpx !important;
		height: 40rpx !important;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.btn-wrap {
		display: flex;
		position: relative;
		text-align: center;
		align-items: center;
		width: 130rpx;
		margin-right: 5px;
		height: 40rpx;

		.text {
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			position: absolute;
			z-index: 2;
			top: 10rpx;
			left: 55rpx;
		}
	}

	/deep/.form-picker {
		font-size: 26rpx;
	}

	.item-picker {
		flex: 1
	}

	.fill-view {
		height: 80rpx;
		width: 100%;
	}

	.nav-bar {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* padding:0 30rpx; */
		background-color: #fff;
		z-index: 90;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */

		&:after {
			border-color: #f7f7f7;
		}

	}

	.positon-box {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* padding:0 30rpx; */
		background-color: #fff;
		position: relative;
	}

	.nav-bar-box {
		width: 360rpx;
		height: 80rpx;
		font-size: 26rpx;
		background-color: #FFFFFF;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		position: relative;
		margin-left: 30rpx;
	}

	.nav-bar-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 30rpx;

		.right-text {
			width: 60rpx;
			font-family: AlibabaPuHuiTi-Regular;
			font-size: 26rpx;
			letter-spacing: 0px;
			color: #808080;
		}

		image {
			width: 13rpx;
			height: 7rpx;
		}
	}

	.nav-item {
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		padding-top: 4rpx;
		position: relative;
	}

	.tit-wrap {
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.number {
		/* position: absolute; */
		/* 	right: -20rpx;
		top: 0px; */
		min-width: 36rpx;
		height: 36rpx;
		padding: 0 6rpx;
		text-align: bottom;
		line-height: 28rpx;
		color: #808080;
		border: 4rpx solid #fff;
		border-radius: 100rpx;
		font-size: 20rpx;
	}

	.tit {
		font-size: 26rpx;
		color: #808080;
	}

	.active {
		color: #0099cc;
		/* font-weight: 700; */
	}

	.line {
		width: 150rpx;
		height: 6rpx;
		border-radius: 3rpx;
		background-color: #0099cc;
		opacity: 0;

		&--show {
			opacity: 1;
		}
	}

	.sel-box-two {
		position: absolute;
		top: 80rpx;
		right: 0;
		width: 750rpx;
		background-color: #ffffff;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
		transition: all ease-out 0.2s;
		z-index: 999;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 23rpx 0;
	}

	.box-two-item {
		width: 375rpx;
		margin: 8rpx 0;
		font-size: 26rpx;
		color: #808080;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.item-text {
			width: 110rpx;
			font-family: AlibabaPuHuiTi-Regular;
			font-size: 26rpx;
			color: #414a5d;
			margin-left: 32rpx;
		}

		.item-choose {
			width: 60rpx;
			font-family: AlibabaPuHuiTi-Regular;
			font-size: 26rpx;
			color: #808080;
			margin-left: 36rpx;
		}

		image {
			width: 26rpx;
			height: 27rpx;
			margin-left: 30rpx;
		}
	}

	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		-webkit-transform: scale(1.185);
		transform: scale(1.185);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000px;
		perspective: 1000px;
		background: rgba(0, 0, 0, 0.6);
		-webkit-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.show {
		opacity: 0;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
</style>
